<template>

  <div class="container">

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="uniqueID"
        label="证件号"
        width="300">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="200">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="200">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- 修改数据 -->
          <el-button type="success" icon="el-icon-check" @click="isPass(scope.row)" size="mini">通过预约</el-button>
        </template>

      </el-table-column>
    </el-table>

  </div>

</template>

<script>
import { GetAppointments, UpdateAppointmentStatus } from "../../api/public";
import { Error, Confirm, Success, Info } from "../../utils/element.config";

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    GetAppointments().then(result => {
      if( result.code === 200 ){
        this.tableData = result.data
        this.tableData.forEach(item => {
          item.status = "等待预约通过"
        })
      }else if( result.code === 300 ){
        Info(result.message)
      }
    })
  },
  methods: {
    isPass(row){
      Confirm(`是否让[${row.username}]通过预约？`, "是否继续").then(() => {

        UpdateAppointmentStatus({id: row.id}).then(result => {
          if( result.code === 200 ){
            for( let i = 0; i < this.tableData.length; i++ ){
              if( row.id === this.tableData[i].id )
                this.tableData.splice(i, 1)
            }
            Success(result.message)
          }else if( result.code === 300 ){
            Error(result.message)
          }
        })

      }).catch(() => {
        Info("已取消了'通过预约'")
      })
    }
  }
}
</script>

<style scoped>

</style>
